<template>
  <div>
    <van-nav-bar
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="车辆概况"
    ></van-nav-bar>
    <div>
      <img class="vp-image" src="../../../assets/images/03.png" alt />
      <div class="vp-vehice">
        <div class="vp-intro">
          <p class="vp-na">沃尔沃S90</p>
          <div class="vp-price">
            <span>￥</span>37.29-49.59
            <span>万</span>
          </div>
          <div class="vp-keep">
            <div>
              <P>保值率：75%</P>
              <img src="../../../assets/images/05.png" />
            </div>
            <p>中大型车&nbsp;2.0T</p>
          </div>
        </div>
        <div class="vp-parameter">
          <img @click="dealer" src="../../../assets/images/33.png" />
          <div>
            <img src="../../../assets/images/32.png" />
            <p>参数配置</p>
          </div>
        </div>
      </div>
      <!-- end -->
      <div class="vp-cardList">
        <div class="vp-cardItem">
          <p>一成购</p>
          <div>一成首付</div>
        </div>
        <div class="vp-cardItem">
          <p>二手车</p>
          <div>更多沃尔沃的车辆</div>
        </div>
        <div class="vp-cardItem">
          <p>提车价</p>
          <div>车友提车价</div>
        </div>
        <div class="vp-cardItem">
          <p>低价购</p>
          <div>一键获取</div>
        </div>
      </div>
      <!-- 车型 同级车 -->
      <van-tabs v-model="active" line-width="15px" color="#4fa580" title-active-color="#4fa580">
        <van-tab title="车型">
          <van-tabs class="sign-tabs" v-model="tabactive">
            <van-tab>
              <template #title>
                <span class="tab-span">全部在售</span>
              </template>
              <div class="vp-vehicle">
                <div v-for="(item, index) in vpList" :key="index" class="vp-model">
                  <p class="vp-m-text">{{item.text}}</p>
                  <div v-for="(item1, index1) in item.cardList" :key="index1" class="vp-card-list">
                    <div class="vp-text">
                      <p>{{item1.name}}</p>
                      <img src="../../../assets/images/05.png" />
                    </div>
                    <div class="vp-price">
                      <p>降{{item1.depreciate}}万</p>
                      <div>{{item1.price}}万起</div>
                    </div>
                    <div class="vp-drive">
                      <p>前置前驱 8 档手自一体</p>
                      <div>厂家指导价:{{item1.adviser}}万</div>
                    </div>
                    <div class="vp-base">
                      <img src="../../../assets/images/34.png" />
                      <img src="../../../assets/images/35.png" />
                      <div>获取底价</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab>
              <template #title>
                <span class="tab-span">2019</span>
              </template>
              <div class="vp-vehicle">
                <div v-for="(item, index) in vpList" :key="index" class="vp-model">
                  <p class="vp-m-text">{{item.text}}</p>
                  <div v-for="(item1, index1) in item.cardList" :key="index1" class="vp-card-list">
                    <div class="vp-text">
                      <p>{{item1.name}}</p>
                      <img src="../../../assets/images/05.png" />
                    </div>
                    <div class="vp-price">
                      <p>降{{item1.depreciate}}万</p>
                      <div>{{item1.price}}万起</div>
                    </div>
                    <div class="vp-drive">
                      <p>前置前驱 8 档手自一体</p>
                      <div>厂家指导价:{{item1.adviser}}万</div>
                    </div>
                    <div class="vp-base">
                      <img src="../../../assets/images/34.png" />
                      <img src="../../../assets/images/35.png" />
                      <div>获取底价</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab>
              <template #title>
                <span class="tab-span">2018</span>
              </template>
              <div class="vp-vehicle">
                <div v-for="(item, index) in vpList" :key="index" class="vp-model">
                  <p class="vp-m-text">{{item.text}}</p>
                  <div v-for="(item1, index1) in item.cardList" :key="index1" class="vp-card-list">
                    <div class="vp-text">
                      <p>{{item1.name}}</p>
                      <img src="../../../assets/images/05.png" />
                    </div>
                    <div class="vp-price">
                      <p>降{{item1.depreciate}}万</p>
                      <div>{{item1.price}}万起</div>
                    </div>
                    <div class="vp-drive">
                      <p>前置前驱 8 档手自一体</p>
                      <div>厂家指导价:{{item1.adviser}}万</div>
                    </div>
                    <div class="vp-base">
                      <img src="../../../assets/images/34.png" />
                      <img src="../../../assets/images/35.png" />
                      <div>获取底价</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab>
              <template #title>
                <span class="tab-span">2017</span>
              </template>
              <div class="vp-vehicle">
                <div v-for="(item, index) in vpList" :key="index" class="vp-model">
                  <p class="vp-m-text">{{item.text}}</p>
                  <div v-for="(item1, index1) in item.cardList" :key="index1" class="vp-card-list">
                    <div class="vp-text">
                      <p>{{item1.name}}</p>
                      <img src="../../../assets/images/05.png" />
                    </div>
                    <div class="vp-price">
                      <p>降{{item1.depreciate}}万</p>
                      <div>{{item1.price}}万起</div>
                    </div>
                    <div class="vp-drive">
                      <p>前置前驱 8 档手自一体</p>
                      <div>厂家指导价:{{item1.adviser}}万</div>
                    </div>
                    <div class="vp-base">
                      <img src="../../../assets/images/34.png" />
                      <img src="../../../assets/images/35.png" />
                      <div>获取底价</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
          <!-- 结束 -->
        </van-tab>
        <van-tab title="同级车">
          <div class="vp-vis-a-vis">
            <div v-for="(item, index) in vpVis" :key="index" class="vp-vis-a">
              <img :src="item.img" />
              <div>
                <p>{{item.name}}</p>
                <div>{{item.price1}}-{{item.price2}}万</div>
              </div>
              <div class="vp-base-price">获取底价</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <!-- 推荐二手车 -->
      <div class="vp-referrer">
        <div class="vp-caption">
          <div></div>
          <p>推荐二手车</p>
        </div>
        <div class="vp-caption-list">
          <div v-for="(item, index) in referrer" :key="index" class="caption-card">
            <img :src="item.img" alt />
            <p>{{item.text}}</p>
            <div>{{item.time}}年/{{item.kilometre}}万公里</div>
            <p>{{item.price}}万</p>
          </div>
        </div>
      </div>
      <!-- 推荐车系 -->
      <div class="vp-referrer">
        <div class="vp-caption">
          <div></div>
          <p>联系车系</p>
        </div>
        <div class="vp-affiliation">
          <div v-for="(item, index) in affiliation" :key="index">
            <img :src="item.img" alt />
            <p>{{item.name}}</p>
            <div>{{item.price1}}-{{item.price2}}万</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
  </div>
</template>

<script>
export default {
  name: "VehicleProfile",
  data() {
    return {
      tabactive: 0,
      active: 0,
      vpList: [
        {
          text: "2.0L 涡轮增压 190 马力 国 VI",
          cardList: [
            {
              name: "2020款 T4 智行豪华版",
              depreciate: "6.79",
              price: "30.5",
              adviser: "40.29"
            }
          ]
        },
        {
          text: "2.0升 涡轮增压 254 马力 国 VI",
          cardList: [
            {
              name: "2020款 T5 智行豪华版",
              depreciate: "6.79",
              price: "30.5",
              adviser: "40.29"
            },
            {
              name: "2020款 T5 智逸豪华版",
              depreciate: "8.59",
              price: "31.7",
              adviser: "43.99"
            }
          ]
        },
        {
          text: "1.6L 自然吸气 110马力",
          cardList: [
            {
              name: "2017款 1.6L 手动风尚版",
              depreciate: "3.78",
              price: "7.01",
              adviser: "10.79"
            },
            {
              name: "2017款 1.6L 手动风尚版",
              depreciate: "3.8",
              price: "8.09",
              adviser: "10.79"
            }
          ]
        }
      ],
      referrer: [
        {
          img: require("../../../assets/images/36.png"),
          text: "本田 思域 2016款 220TURBO 自动豪华版",
          time: "2018",
          kilometre: "2",
          price: "12.5"
        },
        {
          img: require("../../../assets/images/37.png"),
          text: "本田 思域 2016款 180TURBO 自动舒适版",
          time: "2018",
          kilometre: "2",
          price: "10.5"
        },
        {
          img: require("../../../assets/images/36.png"),
          text: "本田 思域 2016款 180TURBO 自动舒适版",
          time: "2018",
          kilometre: "3",
          price: "10.98"
        },
        {
          img: require("../../../assets/images/36.png"),
          text: "本田 思域 2016款 220TURBO 自动尊享版",
          time: "2016",
          kilometre: "7",
          price: "12.2"
        }
      ],
      affiliation: [
        {
          img: require("../../../assets/images/38.png"),
          name: "拉罗拉",
          price1: "11.98",
          price2: "15-98"
        },
        {
          img: require("../../../assets/images/39.png"),
          name: "马自达3 马自达汽车",
          price1: "11.29",
          price2: "16.89"
        },
        {
          img: require("../../../assets/images/40.png"),
          name: "英朗",
          price1: "11.59",
          price2: "14-39"
        },
        {
          img: require("../../../assets/images/38.png"),
          name: "拉罗拉",
          price1: "11.98",
          price2: "15-98"
        },
        {
          img: require("../../../assets/images/39.png"),
          name: "马自达3 马自达汽车",
          price1: "11.29",
          price2: "16.89"
        },
        {
          img: require("../../../assets/images/40.png"),
          name: "英朗",
          price1: "11.59",
          price2: "14-39"
        }
      ],
      vpVis: [
        {
          img: require("../../../assets/images/38.png"),
          name: "杰德",
          price1: "12.99",
          price2: "16.59"
        },
        {
          img: require("../../../assets/images/39.png"),
          name: "威朗",
          price1: "13.59",
          price2: "18.59"
        },
        {
          img: require("../../../assets/images/40.png"),
          name: "泰新能源",
          price1: "12.99",
          price2: "17.48"
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    dealer() {
      this.$router.push({ path: "/Dealer" });
    }
  },
    created(){
    let dsBridge = require("dsbridge");
         dsBridge.call("goBack","", function() {
           history.go(-1);
         });
   },
};
</script>

<style>
</style>